import React from 'react';
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx'
import {WeaDialog, WeaFormItem, WeaLocaleProvider, WeaBrowser, WeaDropdown, WeaSelect} from 'ecCom'

import {WeaSwitch} from 'comsMobx'
import {Button, Menu, Modal,message} from 'antd'
import './style/formulaDialog.less'
import has from 'lodash/has';
const getLabel = WeaLocaleProvider.getLabel;

export default class FormulaSelection extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            operate: '1',//符号
            conditionfield: {},//左边选择到的结果
            conditionValue: '',//右边边选择到的结果
            rightBorwserProps:{},
            modalVisible: false,//弹窗是否可见
            isSingle: true,  //控制右边浏览按钮是多选还是单选
            replaceDatas: [],
            fieldInfo: '',
            operateDatas: [
                {key: '1', label: getLabel(327, "等于")},
                {key: '2', label: getLabel(15508, "不等于")},
                {key: '3', label: getLabel(353, "属于")},
                {key: '4', label: getLabel(21473, "不属于")},
            ]
        }
    }

    componentWillMount() {
        this.showModal(this.props.isShow)
    }

    componentWillReceiveProps(nextProps) {
        this.showModal(nextProps.isShow)
    }

    showModal(bool, conditionfield = {}) {
        let updateState = this.calculateRightBrowserProp(conditionfield.id);
        this.setState({modalVisible: bool, conditionfield,...updateState});
    }

    //选择下拉列表值时执行此方法
    onSelect = (e) => {
        const {rightBorwserProps = {}} = this.state;
        if(e == 3 || e == 4) {
            const {type = ''} = rightBorwserProps;
            let typetemp = type;
            if(type == '1') typetemp  = "17";
            if(type == '16') typetemp = "152";
            if(type == '4') typetemp = '57';
            if(type == '164') typetemp = '194';
            rightBorwserProps.type = typetemp;
            rightBorwserProps.isSingle = false;
        }
        this.setState({rightBorwserProps,"operate": e, "conditionValue": '', replaceDatas: []});
    }
    //左边浏览按钮选择事件
    handleOnChange_l = (fieldid, showname) => {
        //计算 rightBrowserType
        let updateState = this.calculateRightBrowserProp(fieldid);
        this.setState({"conditionfield": {"id": fieldid, "name": showname}, "conditionValue": '', "replaceDatas": [],...updateState});
    }

    calculateRightBrowserProp(fieldid = ''){
        const {browserFieldProps = {}} = this.props;
        if(fieldid == '') return {};
        let updateState = {rightBorwserProps:{}};
        if(has(browserFieldProps,`field${fieldid}`)) {
            updateState.rightBorwserProps = browserFieldProps[`field${fieldid}`];
        }
        return updateState;
    }

    //右边浏览按钮选择事件
    handleOnChange_r = (ids, names, datas) => {
        this.setState({"conditionValue": ids, "replaceDatas": datas});
    }

    //点击确定
    handleOnClick = () => {
        const resultPrams = {
            conditionfield: this.state.conditionfield,
            operate: this.state.operate,
            conditionValue: this.state.conditionValue
        }
        if (resultPrams.conditionfield.id === '0' || resultPrams.conditionfield.id === 0 || resultPrams.conditionfield.id === '' ||
            resultPrams.conditionValue.length <= 0 || resultPrams.conditionValue === '') {
            Modal.warning({
                title: getLabel(131329,"信息确认"),
                content: getLabel(384146,"必要信息不完整，红色*为必填项"),
                okText: getLabel(83446,`确定`),
                cancelText:getLabel(31129,`取消`),
            })
        } else {
            const {formFields = {}} = this.props;
            let formFieldsTemp = toJS(formFields);
            let leftSelectValue = this.state.conditionfield.id;
            for(let i = 0;i < formFieldsTemp.length;i++){
                let formField =  formFieldsTemp[i];
                let {id,type,httype} = formField;
                if(id == leftSelectValue) {
                    resultPrams.fieldInfo = formField;
                }
            }
            const {onOk} = this.props
            if (typeof onOk === 'function') {
                onOk(resultPrams);
                this.clearState();
            }
            this.showModal(false);
        }
    }

    clearState(){
        this.setState({
            conditionfield: {},
            operate: '1',
            conditionValue: '',
            modalVisible: false,
            replaceDatas: [],
            fieldInfo: {}
        })
    }

    //取消弹框
    handleOnCancel = () => {
        this.showModal(false);
        this.clearState();
    }

    render() {
        const {operateDatas = [], rightBrowserType,rightBrowserParams = {},conditionfield = {},rightBorwserProps = {}} = this.state;
        const {formFields} = this.props
        const leftDatas = this.getLeftSelectDatas();
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@a5wutx`}
                title='条件设置'
                visible={this.state.modalVisible}
                style={{width: 600, height: 200}}
                icon='icon-coms-workflow'
                iconBgcolor={'#0079DE'}
                buttons={<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@yzpsrz`} type="primary" onClick={this.handleOnClick}>{getLabel(83446, "确定")}</Button>}
                onCancel={this.handleOnCancel}
            >
                <div style={{paddingTop: "20px"}}>
                    <div style={{float: "left", width: "40%", textAlign: "center", padding: " 0 20px"}}>
                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@u6k51g`}
                            style={{width: "100%"}}
                            options={leftDatas}
                            onChange={this.handleOnChange_l}
                            value={conditionfield.id}
                        />
                    </div>

                    <div style={{float: "left", width: "20%", textAlign: "center", padding: "0 20px"}}>
                        <WeaDropdown ecId={`${this && this.props && this.props.ecId || ''}_WeaDropdown@osij6j`} datas={operateDatas} onSelect={this.onSelect} defaultKey='1'
                                     style={{width: "100%"}}/>
                    </div>

                    <div style={{float: "left", width: "40%", textAlign: "center", padding: " 0 20px"}}>
                        <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@y1uv88`}
                            {...rightBorwserProps}
                            icon='icon-coms-workflow'
                            iconBgcolor={'#0079DE'}
                            replaceDatas={this.state.replaceDatas}
                            textDecoration={true}
                            inputStyle={{width: 200, float: "left"}}
                            onChange={this.handleOnChange_r}
                            viewAttr = {3}
                        />
                    </div>
                </div>
            </WeaDialog>
        )
    }

    getLeftSelectDatas() {
        let datas = [];
        const {formFields = [],browserFieldProps = {}} = this.props;
        formFields.forEach((v, index) => {
            const {httype, id, label,type} = v;
            if(has(browserFieldProps,`field${id}`)){
                datas.push({key: id.toString(), showname: label});
            }
        });
        return datas;
    }
}